<template>
  <div id="recordInfoIndex">
    <el-row>
      <el-col :span="8">
        <el-carousel height="200px">
          <el-carousel-item v-for="item in fileList" :key="item">
            <el-image
              style="width: 100%; height: 100%;border-radius: 5px"
              :src="item"
              :preview-src-list="fileList"
              ></el-image>
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :span="16" style="box-sizing: border-box;padding-left: 15px">
        <el-descriptions :title="showData.record.name" :column="2">
          <el-descriptions-item label="物资编号">{{ showData.record.code }}</el-descriptions-item>
          <el-descriptions-item label="所在仓库">{{ showData.record.warehouseName }}</el-descriptions-item>
          <el-descriptions-item label="物资分类">{{ showData.record.assificationName }}</el-descriptions-item>
          <el-descriptions-item label="物资型号">{{ showData.record.modelName }}</el-descriptions-item>
          <el-descriptions-item label="在库数量">
            <el-tag size="small">{{ showData.record.wmsCount }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="计量单位">{{ showData.record.uniName }}</el-descriptions-item>
          <el-descriptions-item label="物资状态">
            <el-tag v-if="showData.record.isDelete!=1&&showData.record.wmsCount>0" type="success">在库</el-tag>
            <el-tag v-if="showData.record.isDelete!=1&&showData.record.wmsCount==0" type="warning">无库存</el-tag>
            <el-tag v-if="showData.record.isDelete==1"type="danger">失效</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            {{ showData.record.comment }}
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
    <el-divider content-position="left">补充信息</el-divider>
    <el-row>
      <el-descriptions :column="2">
        <el-descriptions-item v-for="(item,index) in showData.fieldsInfoList" :key="index" :label="item.name">{{ item.vals }}</el-descriptions-item>
      </el-descriptions>
    </el-row>
  </div>
</template>

<script>
import gd_file from "@/components/mycomponents/gd_file.vue";
import * as axiosAPI from '@/api/wms/record.js';

export default {
  name: 'recordInfoIndex',
  components: {gd_file},
  props: {
    // 物资台账id
    recordID: {
      type: String,
      default: null
    }
  },
  mounted() {
    this.initRecordData();
  },
  data() {
    return {
      //展示表单数据
      showData: {
        record: { // 物资信息
          recordID: null,
          comment: null,
          name: null,
          code: null,
          assificationID: null,
          assificationName: null,
          modelID: null,
          modelName: null,
          uniCode: null,
          uniName: null,
          wmsCount: 0,
          warehouseID: null,
          warehouseName: null,
          fileID1: null,
          fileUrl1: null,
          fileID2: null,
          fileUrl2: null,
          fileID3: null,
          fileUrl3: null
        },
        fieldsInfoList: [] // 附加属性集合
      },
      fileList: []
    }
  },
  methods: {
    // 初始化查询物资台账信息
    initRecordData() {
      let _this = this;
      axiosAPI.getByID(_this.recordID)
        .then(function (res) {
          if (res.code == "0000") {
            _this.showData.record = res.data.record;
            _this.showData.fieldsInfoList = res.data.fieldsInfoList;
            _this.fileList.push(_this.showData.record.fileUrl1);
            _this.fileList.push(_this.showData.record.fileUrl2);
            _this.fileList.push(_this.showData.record.fileUrl3);
          }
        })
    }
  }
}
</script>

<style scoped>

</style>
